<template>
  <div class="layoutHeader">
    <!--这里保留一个图片的位置-->
    <div class="headers">
      <ul>
        <li v-for="header in headerList" :key="header.id">
          {{ header.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts" name="LayoutHeader">
import { ref } from "vue";

let headerList = ref([
  {
    id: "abc001",
    name: "首页",
  },
  {
    id: "abc002",
    name: "居家",
  },
  {
    id: "abc003",
    name: "美食",
  },
  {
    id: "abc004",
    name: "服饰",
  },
  {
    id: "abc005",
    name: "母婴",
  },
  {
    id: "abc006",
    name: "个户",
  },
  {
    id: "abc007",
    name: "严选",
  },
  {
    id: "abc008",
    name: "数码",
  },
  {
    id: "abc009",
    name: "运动",
  },
  {
    id: "abc010",
    name: "杂项",
  },
]);
</script>

<style scoped>
.headers {
  display: flex;
  flex-direction: row;
}
li {
  list-style-type: none;
}
</style>
